<template>
  <view class="container">
    <view class="strategy-box">
      <view v-if="title">{{ title }}</view>
      <view class="st-title-box"  v-for="(item, index) in list" :key="index"  @click.stop="gotoUrl(list, item,index)">
        <view class="st-title-text">{{ item.articleTitle }} </view>
        <image class="logo-icon" :style="'width:'+item.sourceIconWidth+'rpx;' +'height:'+ item.sourceIconHeight+ 'rpx'" :src="item.sourceIcon" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    titleList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      list: [
      ]
    }
  },
  watch: {
    titleList:{
        // handler (newName, oldName) {
        //     console.log(newName)
        // },
        // immediate: true,
        deep: true,
        immediate: true,
        handler: function (newValue, oldValue) {
          // console.log(newValue, oldValue, '999999999999------==================')
          if (newValue?.length !== oldValue?.length) {
            let that = this
            setTimeout(function (){
              that.printedText(0)
            },1000)
          }

        }
    },
  },
  methods: {
    printedText (index) {
      if(this.titleList.length > 0){
        this.list.push(this.titleList[index])
        if( this.list.length < this.titleList.length){
          setTimeout(()=>{
            this.printedText(index+1)
            this.$emit('scrollToBottom')
          },500)
        }
      }
      
    },
    gotoUrl(list,item,index) {
      console.log('点击了',index)
      this.$emit('postM', {list,item,index});
    }
  },
  mounted() {
    console.log('加载完成', this.titleList)
    // let that = this
    // setTimeout(function (){
    //   that.printedText(0)
    // },500)
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  padding: 0 26rpx 14rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4D566A;
  line-height: 35rpx;
  display: flex;
  .st-title-box {
    display: inline-block;
    margin-bottom: 20rpx;
    line-height: 42rpx;
    .logo-icon{
      margin-bottom: 4rpx;
    }
    .st-title-text {
      margin-right: 5rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular-, PingFangSC-Regular;
      font-weight: normal;
      color: #1E44AF;
      display: inline;
    }

  }
}
</style>